import './index.less';
import CustomIcon, {} from '@/components/Icon/CustomIcon';
import { TreeNode } from '@/domain/tree';
import { CloseOutlined } from '@ant-design/icons';

export interface TabsProps {
    items: Array<TreeNode>;
    selectKey: string,
    onClickTab: (menu: TreeNode) => void,
    onDelete: (menu: TreeNode) => void,
}

function Tabs({items = [], selectKey = '', onClickTab, onDelete}: TabsProps) {
    const clickTab = (e: React.MouseEvent, menu: TreeNode) => {
        e.stopPropagation();
        console.log("cick");
        onClickTab && onClickTab(menu);
    }
    const deleteMenu = (e: React.MouseEvent, menu: TreeNode) => {
        e.stopPropagation();
        console.log("delete");
        onDelete && onDelete(menu);
    }
    return (
        <ul className="wf-tabs">
            {items.map((item: TreeNode) => {
                return (
                    <li key={item.key} className={`wf-tab cursor-point ${item.key === selectKey ? 'select' : ''}`}  onClick={e => clickTab(e, item)}>
                        <div className="tab-content flex iconfont-box align-center">
                            <CustomIcon icon={item.icon}></CustomIcon>
                            <span className="flex-1">{item.label}</span>
                        </div>
                        <CloseOutlined className="tab-delete" onClick={e => deleteMenu(e, item)} />
                    </li>
                );
            })}
        </ul>
    );
}

export default Tabs;
